<template>
	<div class="j-storage">
		<j-header :indexNum="4"></j-header>
		<div class="jc-banner"></div>
		<div class="nav-back">
			<div class="tabs container clearfix">
				<div class="three-level">存储方式 <span>|</span></div>
				<div class="tab nav-tt" @click="toggleTab('Autologous',1)"  :class="{navActive:1 == num}">自体储存</div>
				<div class="tab nav-tt" @click="toggleTab('Dbenefit',2)" :class="{navActive:2 == num}">存捐互利</div>
				<div class="tab nav-tt" @click="toggleTab('PublicDonation',3)"   :class="{navActive:3 == num}">公共捐献</div>
			</div>
		</div>
		<prince :is="currentTab" keep-alive></prince>
		<j-footer></j-footer>
	</div>
</template>
<script>
import JHeader from '../../components/Header.vue'
import JFooter from '../../components/Footer.vue'
import Autologous from '../../components/Bank/Autologous'
import PublicDonation from '../../components/Bank/PublicDonation'
import Dbenefit from '../../components/Bank/Dbenefit'
export default {
  components: {
    JHeader, JFooter, Autologous, PublicDonation, Dbenefit
  },
  data () {
    return {
      currentTab: 'Autologous',
      num: 1
    }
  },
  methods: {
    toggleTab: function (tab, index) {
      this.currentTab = tab // tab 为当前触发标签页的组件名
      this.num = index
    }
  }
}
</script>
<style rel="stylesheet/scss" type="text/scss" lang="scss" scoped>
	.j-storage{
		.clearfix{
			overflow: hidden;
		}
		.jc-banner {
			height: 150px;
			background: url(../../assets/banner/banner03.jpg) center top no-repeat;
		}
		.js-item{
			margin: 80px auto;
			div{
				.js-item-list{
					p{
						font-size: 16px;
						line-height: 30px;
						padding-top: 10px;
						border-top: 5px solid #02adef;
					}
				}
				.js-item-list2{
					.js-list-top{
						width: 50%;
						p{
							font-size: 16px;
							line-height: 30px;
							padding-top: 10px;
							border-top: 5px solid #02adef;
						}
					}
					.js-list-down{
						font-size: 22px;
						color: #2ea7e0;
					}
				}
			}
		}
		.js-process-box{
			background-color: #f8f8f8;
			padding-bottom: 40px;
			.js-nav-title{
				background-color: #eaeaea;
				height: 50px;
				line-height: 50px;
				.nav-text{
					font-size: 16px;
					color: #02adef;
				}
			}
			.donation-process{
				.js-process-list{
					float: left;
					width: 33.333333%;
					text-align: center;
					margin-bottom: 50px;
					padding: 0 10px;
					img{
					}
					p{
						font-size: 16px;
						line-height: 30px;
						color: #222222;
						text-align: left;
					}
				}
			}
		}
	}
	@media (max-width: 767px){
		.j-storage{
			.js-item{
				margin: 80px auto;
				div{
					.js-item-list{
						p{
							font-size: 16px;
							line-height: 30px;
							padding-top: 10px;
							border-top: 5px solid #02adef;
						}
					}
					.js-item-list2{
						.js-list-top{
							width: 50%;
							p{
								font-size: 16px;
								line-height: 30px;
								padding-top: 10px;
								border-top: 5px solid #02adef;
							}
						}
						.js-list-down{
							font-size: 22px;
							color: #2ea7e0;
						}
					}
				}
			}
			.js-process-box{
				background-color: #f8f8f8;
				padding-bottom: 40px;
				.js-nav-title{
					background-color: #eaeaea;
					height: 50px;
					line-height: 50px;
					.nav-text{
						font-size: 16px;
						color: #02adef;
					}
				}
				.donation-process{
					.js-process-list{
						float: left;
						width: 33.333333%;
						text-align: center;
						margin-bottom: 50px;
						padding: 0 10px;
						img{
						}
						p{
							font-size: 16px;
							line-height: 30px;
							color: #222222;
							text-align: left;
						}
					}
				}
			}
		}
	}
</style>
